<!-- @Author: Yu_Bo -->
<template>
	<view class="express">
		<view class="express_tab">
			<u-tabs :list="navList" :is-scroll="false" :current="current" @change="change"></u-tabs>
		</view>
		<!--  -->
		<view class="express_list">
			<view class="list" v-for="(item,index) in list" :key="index" @click="details(item)">
				<view class="list_title">
					<view class="left">
						订单编号：{{item.order_no}}
					</view>
					<view class="right">
						<text class="color1" v-if="item.status==1">待付款</text>
						<text class="color3" v-if="item.status==2">已下单</text>
						<text class="color2" v-if="item.status==3">配送中</text>
						<text class="color4" v-if="item.status==4">已送达</text>
						<text class="color4" v-if="item.status==5">已取消</text>
					</view>
				</view>
				<!--  -->
				<view class="list_book" v-for="(ite,idx) in item.goods_order" :key="idx">
					<view class="img">
						<image :src="ite.image" mode="aspectFill"></image>
					</view>
					<view class="info">
						<view class="title line_one">
							{{ite.goods_name}}
						</view>
						<view class="sku">
							{{ite.condition == 1 ? "新书" : "二手"}}
						</view>
						<view class="money">
							<view class="left">
								<text class="icon">￥</text>
								<text class="num">{{ite.goods_price}}</text>
							</view>
							<view class="right">
								x{{ite.total_num}}
							</view>
						</view>
					</view>
				</view>
				<!--  -->
				<view class="list_money">
					<view class="left">
						共{{item.total_num}}本书
					</view>
					<view class="right">
						<text>合计：￥</text>
						{{item.pay_price}}
					</view>
				</view>
				<!--  -->
				<view class="list_btn" v-if="item.status==1">
					<view class="btn1" @click.stop="closeBtn(index)">
						取消订单
					</view>
					<view class="btn2" @click.stop="payBtn(index)">
						立即支付
					</view>
				</view>
				<view class="list_btn" v-if="item.status==3">
					<view class="btn1" v-if="item.express_no" @click.stop="copyBtn(item.express_no)">
						复制快递单号
					</view>
					<view class="btn2" @click.stop="shouBtn(index)">
						确认收货
					</view>
				</view>
			</view>
			<view class="mall_loading" v-if="list.length">
				<u-loadmore :status="status" color='#999' font-size='26' />
			</view>
		</view>
		<!-- 无数据 -->
		<c-emptydata :type="3" v-if="list.length == 0"></c-emptydata>
		<!--  -->
		<c-prompttwo ref="promptclose" text="确认要取消订单吗?" @confirm="confirmClose"></c-prompttwo>
		<c-prompttwo ref="promptshou" text="确认收到货了吗?" @confirm="confirmShou"></c-prompttwo>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				navList: [
					{ name: '全部' },
					{ name: '已下单' },
					{ name: '配送中' },
					{ name: '已送达' },
					{ name: '已取消' },
				],
				current: 0,
				list: [],
				page: 1,
				status: 'loadmore',//加载前值为loadmore，加载中为loading，没有数据为nomore
				// 
				btnLoading: false,
				closeindex: null,
				payindex: null,
				shouindex: null
			}
		},
		computed: {},
		onLoad() {},
		onShow() {
			this.getList()
		},
		methods: {
			// 切换
			change(index) {
				this.current = index
				this.status = "loadmore"
				this.list = []
				this.page = 1
				this.getList()
			},
			// 列表
			getList() {
				var that = this
				if(that.pages != 1) {
					that.status = 'loading'
				}
				var params = {
					page: that.page,
					type: this.current
				}
				that.$httpApi.expressorder(params).then((res) => {
					if (res.code == 1) {
						if(that.page == 1) {
							that.list = []
						}
						if(res.data && res.data.length == 10) {
							that.list=that.list.concat(res.data)
							that.status = "loadmore"
						} else if(res.data && res.data.length < 10) {
							that.list=that.list.concat(res.data)
							that.status = "nomore"
						} else {
							that.status = "nomore"
						}
					}
				})
			},
			// 详情
			details(item) {
				this.$navToLogin("/pagesWo/express/details?id=" + item.id)
			},
			// 取消订单
			closeBtn(index) {
				this.closeindex= index
				this.$refs.promptclose.openBtn()
			},
			confirmClose() {
				var that = this
				if(that.btnLoading) return
				that.btnLoading = true
				var params = {
					order_id: that.list[that.closeindex].id,
				}
				that.$httpApi.cancel(params).then((res) => {
					that.btnLoading = false
					if (res.code == 1) {
						if(that.current == 0) {
							that.list[that.closeindex].status = 5
						} else {
							that.list.splice(that.closeindex, 1)
						}
						that.$forceUpdate()
					}
				})
			},
			// 立即支付
			payBtn(index) {
				this.payindex = index
				this.$getOrder(this.list[this.payindex].id).then(res=>{
					if(this.current == 0) {
						this.list[this.payindex].status = 2
					} else {
						this.list.splice(this.payindex, 1)
					}
					this.$forceUpdate()
				})
			},
			// 确认收货
			shouBtn(index) {
				this.shouindex= index
				this.$refs.promptshou.openBtn()
			},
			confirmShou() {
				var that = this
				if(that.btnLoading) return
				that.btnLoading = true
				var params = {
					order_id: that.list[that.shouindex].id,
				}
				that.$httpApi.confirm(params).then((res) => {
					that.btnLoading = false
					if (res.code == 1) {
						if(that.current == 0) {
							that.list[that.shouindex].status = 4
						} else {
							that.list.splice(that.shouindex, 1)
						}
						that.$forceUpdate()
					}
				})
			},
			// 复制
			copyBtn(val) {
				uni.setClipboardData({
					data: val,
					success: function () {
						console.log('success');
					}
				});
			},
		},
		onReachBottom(){
			 if(this.status == 'nomore' || this.status == 'loading'){
			 	return
			 }
			 this.page++
			 this.search()
		}
	}
</script>

<style lang='scss' scoped>
	.express {
		width: 100%;
		min-height: 100vh;
		background: #f6f6f6;
	}

	.express_tab {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 1;
		width: 100%;
		height: 100rpx;
		background: #ffffff;
	}

	.express_list {
		width: 100%;
		padding: 100rpx 30rpx 30rpx;
		
		.list {
			width: 100%;
			margin-top: 30rpx;
			padding: 0 30rpx 30rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			
			.list_title {
				width: 100%;
				height: 85rpx;
				border-bottom: 2rpx solid #F6F6F6;
				display: flex;
				align-items: center;
				justify-content: space-between;
				
				.left {
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #222222;
				}
				
				.right {
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					display: flex;
					
					.color1 {
						color: #FF5E5E;
					}
					
					.color2 {
						color: #FF9400;
					}
					
					.color3 {
						color: #5A68FF;
					}
					
					.color4 {
						color: #999999;
					}
				}
			}
			
			.list_book {
				width: 100%;
				margin-top: 30rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				
				.img {
					width: 140rpx;
					height: 188rpx;
					
					image {
						display: block;
						width: 100%;
						height: 100%;
					}
				}
				
				.info {
					width: calc(100% - 140rpx);
					height: 188rpx;
					padding-left: 30rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					
					.title {
						width: 100%;
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						font-size: 32rpx;
						color: #222222;
					}
					
					.sku {
						width: 100%;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #222222;
					}
					
					.money {
						width: 100%;
						display: flex;
						align-items: center;
						justify-content: space-between;
						
						.left {
							display: flex;
							align-items: center;
							
							.icon {
								padding-top: 5rpx;
								font-family: PingFang SC, PingFang SC;
								font-weight: bold;
								font-size: 24rpx;
								color: #5A68FF;
							}
							
							.num {
								font-family: PingFang SC, PingFang SC;
								font-weight: bold;
								font-size: 36rpx;
								color: #5A68FF;
							}
							
						}
						
						.right {
							font-family: PingFang SC, PingFang SC;
							font-weight: 400;
							font-size: 28rpx;
							color: #666666;
						}
					}
				}
			}
			
			.list_money {
				width: 100%;
				margin-top: 20rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				
				.left {
					margin-top: 20rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #666666;
				}
				
				.right {
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 36rpx;
					color: #222222;
					display: flex;
					align-items: center;
					
					text {
						padding-top: 5rpx;
						font-weight: 400;
						font-size: 24rpx;
					}
				}
			}
			
			.list_btn {
				width: 100%;
				margin-top: 20rpx;
				display: flex;
				align-items: center;
				justify-content: flex-end;
				
				.btn1 {
					margin-left: 30rpx;
					width: 188rpx;
					line-height: 58rpx;
					text-align: center;
					border-radius: 29rpx;
					border: 2rpx solid #D8D8D8;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #666666;
				}
				
				.btn2 {
					margin-left: 30rpx;
					width: 144rpx;
					line-height: 58rpx;
					text-align: center;
					border-radius: 29rpx;
					border: 2rpx solid #5A68FF;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #5A68FF;
				}
			}
		}
	}
</style>